<template>
	<view class="container">
		<view v-for="(item, index) in orderDetail" class="orderListBg" :style="index>0?'margin-top: 100rpx;':''">
			<view>
				<view class="xdsj">投诉原因：<text class="itemTime">{{item.time}}</text><text
						class="itemState">{{item.content}}</text></view>

			</view>
			<view class="itemCenter">

				<image class="itemImg" :src="item.img"></image>
				<view>
					<view class="itemOneText">{{item.type}}</view>
					<view class="itemTwoText">已选：<text class="itemName">{{item.name}}达人</text></view>
					<view class="itemTwoText">下单时间：{{item.time}}</view>

				</view>
				<view style="position: absolute;right: 40rpx;height: 80px;">
					<view class="itemOneText orgText ">¥<text class="itemOneTextMoney">{{item.wages}}</text></view>
					<view class="itemTwoText " style="text-align:center">共{{item.orderTime}}时</view>

				</view>
			</view>
			<view class="itemCenter">
				<text class="picMsg">图片信息</text><text class="picContent">请提供达人未约定时间达到目的地的凭证</text>
			</view>
		</view>
		<view class="imgClass">
			<view v-for="(item, index) in picList">
				<image :src="item.img" style="width: 50px;height: 50px;"></image>
			</view>
		</view>
		<view class="itemCenter" style="margin-left: 20rpx;">
			<text class="picMsg" >投诉说明</text>
		</view>
		<view class="itemCenter" style="margin-left: 20rpx;">
			<textarea style="width: 100%;
    padding: 50rpx;">投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明投诉说明</textarea>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: [

				],
				picList: [{
						img: '../../../../static/icon/img_girl.png'
					},
					{
						img: '../../../../static/icon/img_girl.png'
					},
					{
						img: '../../../../static/icon/img_girl.png'
					},
					{
						img: '../../../../static/icon/img_girl.png'
					}
				]
			}
		},
		onLoad(e) {

			if (uni.getStorageSync('suggestItem') != null && uni.getStorageSync('suggestItem') != '') {
				this.orderDetail.push(JSON.parse(uni.getStorageSync('suggestItem')))
			}
			let num = 3 - (this.picList.length % 3)
			let picList = this.picList
			for (let i = 0; i < num; i++) {
				picList.push({
					img: ''
				})
			}
			picList.push({
				img: ''
			})
			this.picList = picList

		},
		methods: {}
	}
</script>

<style>
	.topTitle {
		display: flex;
		align-items: center;
	}


	.nav-item {
		display: inline-block;
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.nav-item:last-child {
		margin-right: 0;
	}

	.active {
		display: inline-block;
		color: #FF9E44;
		text-align: center;
		/* Pingfang SC/Headline/Medium */
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.couponListBg {
		border-radius: 2px;
		background: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

	}

	.seclectIcon {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.rightSeclect {

		display: flex;
		align-items: center;
		position: absolute;
		right: 50rpx;
	}

	.orderListBg {
		border-radius: 2px;
		background: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

	}

	.itemCenter {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
	}

	.itemOneText {
		margin-left: 20px;
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-weight: 700;
		line-height: 33px;
	}

	.itemTwoText {
		margin-left: 20px;
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		line-height: 33px;
	}

	.itemThreeText {
		margin-left: 20px;
		color: #FEA442;
		font-family: DIN;
		font-size: 18px;
		font-weight: 700;
		line-height: 33px;
	}

	.moneyIcon {
		color: #FEA442;
		font-family: DIN;
		font-size: 12px;
		font-weight: 700;
	}

	.itemName {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 600;
	}

	.itemOrderTime {
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		position: absolute;
		right: 50rpx;
		line-height: 33px;
	}

	.itemImg {
		width: 85px;
		height: 85px;
		flex-shrink: 0;
	}

	.seclectIcon {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.rightSeclect {

		display: flex;
		align-items: center;
		position: absolute;
		right: 50rpx;
	}

	.mrpx {
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-weight: 400;
	}

	.xdsj {
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
	}

	.itemTime {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.itemState {
		color: red;
		text-align: right;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		position: absolute;
		right: 50rpx;
	}

	.itemOneTextMoney {
		overflow: hidden;
		color: #FEA442;
		font-family: DIN;
		font-size: 18px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	.orgText {
		color: #FEA442;
		font-family: DIN;
		font-size: 12px;
		font-style: normal;
		font-weight: 700;
		line-height: 16px;
	}

	.itemIcon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	.itemTs {
		color: #E83030;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-weight: 600;
		padding-left: 10rpx;
	}

	.itemContent {
		color: #E83030;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		padding-left: 10rpx;
	}

	.itembtmText {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "PingFang SC";
		font-size: 12px;
		font-weight: 400;
	}

	.delectText {
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 12px;
		font-weight: 400;
		position: absolute;
		right: 50rpx;
	}

	.picMsg {
		color: #040B29;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
		/* 157.143% */
	}

	.picContent {
		overflow: hidden;
		color: #929397;
		text-overflow: ellipsis;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 18px;
		margin-left: 20rpx;
	}

	.imgClass {
		flex-wrap: wrap;
		column-count: 4;
		text-align: center;
		display: flex;
	}
	.suggestContent{
		overflow: hidden;
		color: #040B29;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		line-height: 18px;
	}
</style>